當瞭解了linear-gradient以及radial-gradient()特性後，看到這兩個熟悉的字眼加上repeating的屬性也不會太陌生了

repeating-linear-gradient()

background: repeating-linear-gradient(
             方向, 
             顏色 色彩位置, 
             顏色 色彩位置, 
             顏色 色彩位置,
             ...);

方向：

• to (top/bottom/right/left)
• to (top/bottom/right/left)　(top/bottom/right/left)
• 角度(deg) ->順時針遞增
• turn (1 turn=360deg, 0.25 turn=90deg) ->順時針遞增

顏色：

• RGB
• RGBA
• HSL
• HSLA
• 關鍵字(red / blue / yellow / transparent...)

色彩位置：

• px
• %
  (色彩位置的設定方法與linear-gradient一樣)

background: repeating-linear-gradient(to right top, #fff 0px 20px ,#666 20px 25px, #669 25px 45px)

repeating-radial-gradient()

background: repeating-radial-gradient(
         形狀 範圍  at 中心位置,
         顏色 色彩位置, 
         顏色 色彩位置, 
         顏色 色彩位置,
         ...);

形狀：

• ellipse 橢圓形 (預設)
• circle 圓形

範圍

• closest-side 與最近的邊"相切"(注意漸層結束位置會去碰四邊的線)
• closest-corner 與最近的角"相交"(注意漸層結束位置會去碰四邊的角)
• farthest-side 與最遠的邊"相切"
• farthest-corner 與最遠的角"相交"

色彩位置：

• px
• %
  (色彩位置的設定方法與radial-gradient一樣)

background: repeating-radial-gradient(circle, #608ebd, #608ebd 30px, #fff 130px)

↑以此圖為例
意思是：
1.形狀設定為圓形，無設定位置 →套用預設中心點
2.第一個色彩#608ebd 無設定位置 →預設為從0%開始
3.第二個色彩#608ebd 位置30px →從0%~30px，為#608ebd的範圍
4.第三個顏色#fff 位置130px →從30px~130px，為#608ebd
漸層到#fff的範圍
5.開始循環色彩(從0%開始)

?與linear-gradient、radial-gradient差異

嘿~沒有要水過這一篇啦XD
這邊有個特點當初我暈了一下才理解

之前在linear-gradient說，
如果第一個色彩設定大於0%的話，顏色範圍都是從"0% ~ 設定的值"，而最後一個色彩設定小於100%的話，顏色範圍就會是"設定的值~100%"的範圍

BBBBut!!!!
在repeating-linear-gradient和repeating-radial-gradient卻不是這樣

舉個例子來說，
linear-gradient的情況下
把第一個色彩設定10%(>0%)，會自動填滿0%~10%
把最後一個色彩設定80%(<100%)時，會自動填滿80%~100%

background: linear-gradient(to right, red 10%, red 70% ,green 80%);

而repeating-linear-gradient則是開始循環色彩

background: repeating-linear-gradient(to right, red 10%, red 70% ,green 80%);

也就是"0% ~ 10%"的部分循環70%~80%從紅色漸層到綠色的那一段
"80% ~ 100%"的部分循環"10%~20%"的紅色部分

codepen實作

利用repeating-linear-gradient多重背景，做出蘇格蘭紋吧!

<div class="wrap"></div>

.wrap{
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(to top, transparent 0px 48px, #706f6344 48px 52px,transparent 52px 100px),
    repeating-linear-gradient(to right, transparent 0px 48px, #706f6344 48px 52px,transparent 52px 100px),
    repeating-linear-gradient(-45deg, transparent 0px 4px, #fbf7ec66 4px 6px),
    repeating-linear-gradient(to right, transparent 0 100px,#a79d8388 100px 200px),
    repeating-linear-gradient(to top, transparent 0 100px,#a79d8388 100px 200px),
    #faf6eb;
}

鏘鏘~做出這四種樣式之後
利用上下層的順序讓他們交疊出層次

就可以拼出一個漂亮的花紋了~

codepen實作